<template>
  <div :id="chartId" style="width: 100%; height: 400px"></div>
</template>

<script>
import service from "@/service/projects";

export default {
  name: "chart1",
  components: {
    //someComponent
  },
  props: [
    "chartId",
    "chartYjryData",
    "chartLwData",
    "centerData",
    "lwxzList",
    "type",
  ],
  data() {
    return {
      id: "",
      key: "",
      datas: [
        {
          year: "2018",
          applies: 737,
          pay: 60,
          rate: 8.14,
        },
        {
          year: "2019",
          applies: 556,
          pay: 82,
          rate: 14.75,
        },
        {
          year: "2020",
          applies: 480,
          pay: 85,
          rate: 17.71,
        },
      ],
    };
  },
  computed: {},
  watch: {},
  mounted: function () {
    this.initChart();
  },
  methods: {
    load2019Top10Data() {
      const schoolnameArr = [];
      this.chartDiv = echarts.init(document.getElementById(this.chartId));
      this.chartDiv.showLoading({
        text: "数据正在加载...",
        textStyle: { fontSize: 30, color: "#444" },
        effectOption: { backgroundColor: "rgba(0, 0, 0, 0)" },
      });
      this.chartDiv.hideLoading();

      service
        .getDatas(
          {
            columns: ["college_name", this.key, "count:id"],
            group: ["college_name", this.key],
            order: [["count:id", 1]],
            approval_year: 2019,
          },
          this.id
        )
        .then((res) => {
          res.data.forEach((item) => {
            schoolnameArr.push(item.college_name);
          });
          this.loadData(schoolnameArr);
        });
    },
    initChart() {
      // 'use strict';
      if (!document.getElementById(this.chartId)) return;
      echarts.init(document.getElementById(this.chartId)).dispose();
      this.chartDiv = echarts.init(document.getElementById(this.chartId));

      const xAxisData = this.datas.map((i) => i.year);
      let legendData = ["申请项目数", "资助项目数"];

      let seriesData = [];
      legendData.forEach((i, d) => {
        seriesData.push({
          name: i,
          type: "bar",
          // silent: true,
          barWidth: "18",
          barMinHeight: 2,
          itemStyle: {
            // barBorderRadius: 11,
          },
          // barGap: '-100%', // Make series be overlap
          data: this.datas.map((j) => j[d == 0 ? "applies" : "pay"]),
        });
      });
      legendData.push("综合资助率");
      seriesData.push({
        name: "综合资助率",
        type: "line",
        yAxisIndex: 1, //这里要设置哪个y轴，默认是最左边的是0，然后1，2顺序来。
        data: this.datas.map((i) => i.rate),
        symbolSize: 10,
        smooth: true,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgb(255, 204, 102)",
              },
              {
                offset: 1,
                color: "rgb(255, 153, 51)",
              },
            ]),
            color: "rgb(255, 156, 54)",
            label: {
              show: true,
              formatter: "{c} %",
              position: "top",
              textStyle: {
                fontSize: "14",
                color: "rgb(255, 156, 54)",
              },
            },
          },
        },
      });

      const option = {
        color: ["#3898e5", "#1bc481", "#ffaf3c", "#eb5e66"],
        title: {
          text: "",
          subtext: "",
          top: 0,
          left: "center",
          textStyle: {
            fontSize: 18,
            color: "grey",
          },
        },
        animation: false,
        grid: {
          top: "60",
          left: "32",
          bottom: "30",
          right: "39",
          containLabel: true,
        },
        legend: {
          show: true,
          bottom: 0,
          // left: 'middle',
          data: legendData,
          textStyle: {
            // color: 'RGB(193,223,255)',
          },
        },
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            var res = params[0].name;
            for (var i = 0; i < params.length; i++) {
              res +=
                "<br>" +
                  params[i].marker +
                  params[i].seriesName +
                  "：" +
                  (params[i].seriesName == "综合资助率"
                  ? params[i].data + "%"
                  : params[i].data);
            }
            return res;
          },
        },
        xAxis: [
          {
            type: "category",
            // name: '依托单位',
            nameTextStyle: {
              fontSize: 12, // 这个会影响坐标轴的字体大小，不懂为什么
              fontFamily: "微软雅黑",
              align: "center",
            },
            data: xAxisData,
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "rgba(202,202,202,0.15)",
              },
            },
            axisLabel: {
              //   rotate: 45,
              //   margin: 20,
              textStyle: {
                color: "black",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            name: "项目数量",
            nameTextStyle: {
              fontSize: 12, // 这个会影响坐标轴的字体大小，不懂为什么
              fontFamily: "微软雅黑",
            },
            axisLabel: {
              textStyle: {
                // color: 'white',
                color: "black",
              },
              formatter: "{value}",
            },
            splitLine: {
              show: true,
              lineStyle: {
                // type: "dashed",
                color: "#E9E9E9",
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "RGB(47,68,114)",
              },
            },
          },
          {
            type: "value",
            name: "资助率",
            // min: "", //最小坐标
            // max: "", //最大坐标
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              fontSize: 14,
              color: "#333",
              formatter: "{value} %",
            },
            splitLine: {
              show: false, //是否显示分隔线。
            },
          },
        ],
        series: seriesData,
      };

      this.chartDiv.setOption(option);
      window.addEventListener('resize',()=>{
        this.chartDiv.resize();
      });
    },
  },
};
</script>

<style scoped>
</style>
